require(['./config'],()=>{
    require(['template','jquery','header','footer'],(template,$,header)=>{
        class Shopping {
            constructor(){
                this.render()
                this.calcTotalMoney ()
                this.checksChange ()
                this.setAllCheckStatus()
                this.ertdsfjopj()
            }
            render () {
                // 根据localStorage的数据来渲染
                const cart = localStorage.getItem('cart')
                if (cart) {
                    this.cart = JSON.parse(cart)
                    $('#shopping').html(template('car', { cart: this.cart }))
                } else {
                    // 购物车为空
                    $('#shopping').hide()
                }
            }
            calcTotalMoney () {
                // 从0算总价，只要以后做了任何对总价有影响的操作，都直接调用这个方法即可
                let totalMoney = this.cart.reduce((total, shop) => {
                    // 只加选中的
                    if (shop.checked) total += shop.price * shop.count
                    return total
                }, 0)
                $('#Paymoney').html(totalMoney.toFixed(2))
            }
            checksChange () {
                const _this = this
                // 单选绑事件
                $('.checks').on('change', function () {
                    // 获取当前数据的id，在父级tr上自定义属性上
                    const id = $(this).parents('.goshop').data('id')
                    // 把当前数据的checkded属性修改为当前选框的状态
                    _this.cart = _this.cart.map(shop => {
                        if (shop.id === id) shop.checked = $(this).prop('checked')
                        return shop
                    })
                    // 把修改之后的cart重新存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    // 重新算总价
                    _this.calcTotalMoney()
                    _this.setAllCheckStatus()
                })
            }
            setAllCheckStatus () {
                // 设置全选
                const isAllCheck = this.cart.every(shop => shop.checked)
                $('#all-check').prop('checked', isAllCheck)
            }
            ertdsfjopj(){
                const _this=this;
                $('.addBtn').on('click',function(){
                    let num = Number($(this).siblings('#shopNum').html());
                    let id = $(this).parents('#goshop').data('id');
                    num +=1;
                    if(num >= 1){
                        $('.subBtn').prop('disabled',false)
                    }
                    $(this).siblings('#shopNum').html(num);
                    _this.cart = _this.cart.map(shop=>{
                        if(shop.id === id){
                            shop.count = num;
                        }
                        return shop;
                    })
                    const [priceNum] = _this.cart.filter(shop=>{
                        return shop.id === id;
                    });
                    const price = priceNum.price;
                    $(this).parents('#goshop').find('#xiaoji').html(price * num);
                    localStorage.setItem('cart',JSON.stringify(_this.cart));
                    _this.calcTotalMoney();
                })
                $('.subBtn').on('click', function(){
                    let shopNum = Number($(this).siblings('#shopNum').html());
                    let id = $(this).parents('#goshop').data('id');
                    shopNum -= 1;
                    if(shopNum <= 1){
                        $('.subBtn').prop('disabled',true)
                    }
                    $(this).siblings('#shopNum').html(shopNum);
                    _this.cart = _this.cart.map(shop=>{
                        if(shop.id === id){
                            shop.count = shopNum;
                        }
                        return shop;
                    })
                    const [priceNum] = _this.cart.filter(shop=>{
                        return shop.id === id;
                    });
                    const price = priceNum.price;
                    $(this).parents('#goshop').find('#xiaoji').html(price * shopNum);
                    localStorage.setItem('cart',JSON.stringify(_this.cart));
                    _this.calcTotalMoney();
                })
                
            }
        }
        
        new Shopping()
    })
})